<template>
	<view class="w100">
		<!-- <image class="w100" style="height: 350px;" :src="good_details.goodsCover" mode=""></image> -->
		<view class="h350"  v-if="slider.length > 0">
			<swiper class="swiper h350" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500" >
				<swiper-item class="h350" v-for="(item,index) in slider" :key="index" >
					<image class="h350"  :src="item.attachUrl" mode="aspectFill" ></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="w100 bgfff">
			<view class="p30">
				<view class="f36 bold">{{good_details.goodsName}}</view>
				<view class="flexButtom w100">
					<view class="Colororgin">
						<text class="f36">{{good_details.exchangeScore}}</text>
						<text class="f24">积分</text>
						<text class="f24" style="color: #989BA6;margin-left: 10px;text-decoration: line-through;">市场价{{good_details.marketPrice}}元</text>
					</view>
				</view>
			</view>
		</view>
		<view class="w100 bgfff" style="margin-top: 10px;">
			<view class="p30 flexenters" style="border-bottom: 1px solid #F4F7FD;">
				<view class="f30 co34363D">支付方式</view>
				<view class="f30 co017EFE">积分兑换</view>
			</view>
			<view class="p30 flexenters">
				<view class="f30 co34363D">数量</view>
				<view class="f30 co017EFE flexCenter">
					<image class="w40" src="../../../static/img/-.png" mode="" @click="bayMinus"></image>
					<view class="co34363D f30 bold mlr10">{{nums}}</view>
					<image class="w40" src="../../../static/img/+.png" mode="" @click="bayPlus"></image>
				</view>
			</view>
		</view>
		<view class="w100 bgfff" style="margin-top: 10px;">
			<view class="p30">
				<view class="f36 co34363D bold">产品详情</view>
				<view class="" v-html="contents">
					</rich-text>
				</view>
			</view>
		</view>
		<view class="w100 bgfff">
			<view class="p5 ">
				<view class="bg017EFE juCen flexCenter" v-if="conversion" style="border-radius: 8px;" @click="coin">
					<view class="f36 colorfff bold " style="padding: 5px 0;">立即兑换</view>
				</view>
				<view class="colorADB5C5 juCen flexCenter" v-else style="border-radius: 8px;">
					<view class="f36 colorfff bold " style="padding: 5px 0;">积分不足</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import home from "@/serve/api/home.js";
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
	export default {
		components: {
			uniSegmentedControl,
		},
		data() {
			return {
				goodsId: '',
				good_details: '',
				contents: '', //商品详情
				nums: 1,
				ownScore: '', //我的积分
				prices: 1,
				conversion: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				slider:[],//轮播图
			}
		},
		onLoad(e) {
			this.goodsId = e.goodsId
			this.my_line()
		},
		methods: {
			async goods() {
				var that = this
				let parme = {
					goodsId: this.goodsId,
				}
				const res = await home.selectGoodsIntegralInfo(parme)
				this.good_details = res.data.data
				// this.contents = res.data.data.goodsDetails
				that.slider = res.data.data.goodsRollingList
				if (Number(this.ownScore) >= Number(res.data.data.exchangeScore)) {
					this.conversion = true
				} else {
					this.conversion = false
				}
				var richtext=  res.data.data.goodsDetails;
				 const regex = new RegExp('<img', 'gi');
				 richtext= richtext.replace(regex, `<img style="max-width: 100%;"`);
				 this.contents = richtext;
			},
			//数量++
			bayPlus() {
				var nums = Number(this.nums);
				nums = nums + 1;
				if (this.nums > this.good_details.inventory) {
					uni.showToast({
						title: '库存不足',
						icon: "none"
					})
					return;
				}
				this.nums = nums;
				var allpice = Number(this.good_details.exchangeScore) * Number(nums)
				var prices = Number(allpice).toFixed(0)
				if (Number(this.ownScore) >= Number(prices)) {
					this.conversion = true
				} else {
					this.conversion = false
				}
				this.prices = prices
			},
			//数量--
			bayMinus() {
				var nums = Number(this.nums);
				if (nums <= 1) {
					return false;
				}
				nums = nums - 1;
				this.nums = nums;
				var allpice = Number(this.good_details.exchangeScore) * Number(nums)
				var prices = Number(allpice).toFixed(0)
				if (Number(this.ownScore) >= Number(prices)) {
					this.conversion = true
				} else {
					this.conversion = false
				}
				this.prices = prices
			},
			//我的积分
			async my_line() {
				const res = await home.selectSysUserById({})
				this.ownScore = res.data.data.ownScore
				this.goods()
			},
			async coin() {
				if (Number(this.ownScore) < Number(this.prices)) {
					uni.showToast({
						title: '积分不足',
						icon: "none"
					})
					return;
				}
				let parme = {
					goodsId: this.goodsId,
					exchangeCount: this.nums
				}
				const res = await home.immediatelyExchange(parme)
				if (res.data.code == 0) {
					uni.navigateTo({
						url: 'coins?goodsId=' + this.goodsId + '&exchangeCount=' + this.nums + '&total=' + res.data.data.total
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.p30 {
		padding: 15px 20px;
		box-sizing: border-box;
	}

	.Colororgin {
		color: #FF5753;
	}

	.co017EFE {
		color: #017EFE;
	}

	.co34363D {
		color: #34363D;
	}

	.w40 {
		width: 20px;
		height: 20px;
	}

	.mlr10 {
		margin: 0 10px;
	}

	.p5 {
		padding: 3px 20px;
		box-sizing: border-box;
	}

	.bg017EFE {
		background-color: #007AFF;
	}

	.colorADB5C5 {
		background-color: #ADB5C5;
	}
	.h350{
		width: 100%;
		height: 350px;
	}
</style>
